<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<c:set var="local"
	value="${pageContext.request.contextPath}/service/channelAction"
	scope="request" />
<jsp:include page="../include.jsp" />
<link href="${local}/resource/css/zTreeStyle.css" rel="stylesheet"
	type="text/css" />
<link rel="stylesheet" href="demo.css" type="text/css" />
<script src="${local}/resource/js/jquery.ztree.core-3.0.min.js"></script>
<script>
	var setting = {
		view : {
			dblClickExpand : false,
			selectedMulti : false
		},
		async : {
			enable : true,
			url : "../../templateAction/template/tree_show.do?node=",
			type : "post"
		},
		callback : {
			onClick : onClick,
			beforeAsync : zTreeBeforeAsync
		}
	};

	function zTreeBeforeAsync(treeId, treeNode) {
		if(treeNode==null) return true;
		if (treeNode.userdata != null && treeNode.userdata == 'end')
			return false;
		return true;
	};

	function onClick(event, treeId, treeNode) {
		$("#leaf").empty();
		$("#leaf").append("<option value='-1'>--请选择--</option>");
		var url="../../templateAction/template/tree_show.do?node="+treeNode.id;
		$.getJSON(url, function(json){
			for(var i = 0; i < json.length; i++)
            {
				var option="<option value='json[i].id'>"+json[i].name+"</option>";
				$("#leaf").append(option);
            }
			});
	}

	function showMenu() {
		var cityObj = $("#citySel");
		var cityOffset = $("#citySel").offset();
		$("#menuContent").css({
			left : cityOffset.left + "px",
			top : cityOffset.top + cityObj.outerHeight() + "px"
		}).slideDown("fast");

		$("body").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "citySel"
				|| event.target.id == "menuContent" || $(event.target).parents(
				"#menuContent").length > 0)) {
			hideMenu();
		}
	}

	$(document).ready(function() {
		$("#leaf").append("<option value='-1'>--请选择--</option>");
		$.fn.zTree.init($("#treeDemo"), setting);
	});
</script>
</head>

<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul class="list">
	<li style="float: left;" class="title"><input id="citySel" type="text" readonly
		value="" style="width: 120px;" onclick="showMenu();" />
	</li>
	<li  class="title" style="float: left;">
		<select name="leaf" id="leaf"></select>
	</li>
</ul>
</div>
</div>

<div id="menuContent" class="menuContent"
	style="display: none; position: absolute;">
<ul id="treeDemo" class="ztree"
	style="margin-top: 0; width: 180px; height: 300px;"></ul>
</div>
</body>
</html>